CSS trigonometrinės funkcijos: matematiniai išdėstymai dinamiškiems dizainams

CSS, tradiciškai žinomas dėl statinių elementų stiliaus, evoliucionavo ir siūlo galingus įrankius dinaminiam ir reaguojančiam žiniatinklio dizainui. Tarp jų yra trigonometrinės funkcijos, leidžiančios kūrėjams naudoti matematinius principus tiesiogiai savo CSS. Šis straipsnis nagrinėja, kaip naudoti `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` ir `atan2()`, kad būtų galima sukurti sudėtingus, dinaminius ir matematiškai tikslius išdėstymus.

CSS trigonometrinių funkcijų supratimas

Trigonometrinės funkcijos CSS leidžia atlikti skaičiavimus, pagrįstus kampais, todėl gaunamos reikšmės, kurios gali būti naudojamos įvairioms CSS savybėms, tokioms kaip `transform`, `width`, `height` ir kt. Tai atveria galimybes kurti apskritus išdėstymus, sudėtingas animacijas ir reaguojančius dizainus, kurie matematiškai prisitaiko prie skirtingų ekrano dydžių.

Pagrindinės funkcijos: sin(), cos() ir tan()

Šios funkcijos yra trigonometrinių skaičiavimų pagrindas:

• `sin(kampas)`: Grąžina kampo sinusą. Kampas turi būti nurodytas tokiais vienetais kaip `deg` (laipsniai), `rad` (radianai), `grad` (gradai) arba `turn` (apsisukimų skaičius). Sinuso reikšmės svyruoja nuo -1 iki 1.
• `cos(kampas)`: Grąžina kampo kosinusą. Panašiai kaip `sin()`, kampas turi būti nurodytas vienetais. Kosinuso reikšmės taip pat svyruoja nuo -1 iki 1.
• `tan(kampas)`: Grąžina kampo tangentą. Kampas nurodomas vienetais. Tangento reikšmės gali svyruoti nuo neigiamos iki teigiamos begalybės.

Atvirkštinės trigonometrinės funkcijos: asin(), acos(), atan() ir atan2()

Atvirkštinės trigonometrinės funkcijos leidžia apskaičiuoti kampą pagal žinomą santykį:

• `asin(skaičius)`: Grąžina skaičiaus arkusinusą (atvirkštinis sinusas). Skaičius turi būti tarp -1 ir 1. Rezultatas yra kampas radianais.
• `acos(skaičius)`: Grąžina skaičiaus arkosinusą (atvirkštinis kosinusas). Skaičius turi būti tarp -1 ir 1. Rezultatas yra kampas radianais.
• `atan(skaičius)`: Grąžina skaičiaus arkotangentą (atvirkštinis tangentas). Rezultatas yra kampas radianais.
• `atan2(y, x)`: Grąžina y/x arkotangentą, naudodamas abiejų argumentų ženklus, kad nustatytų rezultato kvadrantą. Tai labai svarbu norint nustatyti teisingą kampą dirbant su koordinatėmis. Rezultatas yra kampas radianais.

Praktinis taikymas ir pavyzdžiai

Panagrinėkime keletą praktinių CSS trigonometrinių funkcijų pritaikymo būdų.

1. Apskrito išdėstymo kūrimas

Vienas įprastas naudojimo atvejis yra elementų išdėstymas apskritime. Tai galima pasiekti apskaičiuojant kiekvieno elemento padėtį pagal jo indeksą ir bendrą elementų skaičių, naudojant `sin()` ir `cos()`, kad būtų nustatytos x ir y koordinatės, susijusios su apskritimo centru.

HTML:

            <div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>
            

              
                Copy
              
            
          

CSS:

            .circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}
            

              
                Copy
              
            
          

Šiame pavyzdyje mes apskaičiuojame kiekvieno `.item` elemento padėtį naudodami `sin()` ir `cos()`. Kampas nustatomas padalijant 360 laipsnių iš elementų skaičiaus (5) ir padauginant jį iš elemento indekso. Gautos `sin()` ir `cos()` reikšmės tada naudojamos apskaičiuoti `top` ir `left` pozicijas, efektyviai išdėstant elementus apskritimu. Reikšmė `85px` reiškia apskritimo spindulį, o `15px` kompensuoja elemento dydį.

2. Bangų animacijų kūrimas

Trigonometrinės funkcijos puikiai tinka sklandžiai, bangos formos animacijoms kurti. Galite naudoti `sin()` arba `cos()`, norėdami moduliuoti elemento padėtį, neskaidrumą ar kitas savybes laikui bėgant.

HTML:

            <div class="wave-container">
 <div class="wave-item"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}
            

              
                Copy
              
            
          

Šiame pavyzdyje `wave` animacija naudoja `sin()`, kad apskaičiuotų `.wave-item` elemento vertikalią padėtį (`translateY`). Animacijai progresuojant, sinuso reikšmė keičiasi, sukurdama sklandų, banguojantį bangos efektą. `translateX` užtikrina nuolatinį bangos judėjimą.

3. Reaguojančių lankų ir kreivių kūrimas

CSS trigonometrinės funkcijos gali būti derinamos su vaizdo srities vienetais (pvz., `vw` ir `vh`), kad būtų galima kurti reaguojančius lankus ir kreives, kurie prisitaiko prie skirtingų ekrano dydžių.

HTML:

            <div class="arc-container">
 <div class="arc-element"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}
            

              
                Copy
              
            
          

Šiame pavyzdyje mes naudojame pasirinktines CSS savybes (`--angle`) ir trigonometrines funkcijas, kad padėtume `.arc-element` palei lanką. `left` ir `top` savybės apskaičiuojamos atitinkamai pagal `cos()` ir `sin()`, o kampas laikui bėgant keičiasi per `arc` animaciją. Vaizdo srities vienetai (`vw` ir `vh`) užtikrina, kad lankas proporcingai prisitaikytų prie ekrano dydžio.

4. Atstumų skaičiavimas su `atan2()`

`atan2()` gali nustatyti kampą tarp dviejų taškų, naudingas kuriant efektus, kai elementai reaguoja į vienas kito pozicijas.

Apsvarstykite scenarijų, kai turite du elementus ir norite vieną pasukti, kad jis visada rodytų į kitą:

HTML:

            <div class="container">
 <div class="target">Tikslas</div>
 <div class="pointer">Rodiklis</div>
</div>
            

              
                Copy
              
            
          

CSS (su JavaScript):

            .container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* Svarbu norint teisingai pasukti */
}
            

              
                Copy
              
            
          

JavaScript:

            const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});
            

              
                Copy
              
            
          

Šiame pavyzdyje naudojamas JavaScript, kad būtų gautos pelės koordinatės, susijusios su konteineriu. `Math.atan2()` apskaičiuoja kampą tarp konteinerio centro (veikiančio kaip pradžia) ir pelės padėties. Šis kampas tada naudojamas sukant `.pointer` elementą, užtikrinant, kad jis visada rodytų į pelės žymeklį. `transform-origin: left center;` yra labai svarbus norint užtikrinti, kad rodyklė sukasi teisingai aplink kairįjį centrą.

Trigonometrinių funkcijų naudojimo CSS pranašumai

• Dinamiški ir reaguojantys dizainai: Kurkite išdėstymus, kurie matematiškai prisitaiko prie skirtingų ekrano dydžių ir skiriamosios gebos.
• Sudėtingos animacijos: Sukurkite sklandžias, realistiškas animacijas su bangų judesiais ir kitais sudėtingais raštais.
• Matematinis tikslumas: Pasiekite tikslų elementų pozicionavimą ir dydį pagal trigonometrinius skaičiavimus.
• Sumažintas JavaScript priklausomumas: Atlikite skaičiavimus tiesiogiai CSS, sumažindami sudėtingo JavaScript kodo poreikį išdėstymui ir animacijai.
• Pagerintas našumas: CSS pagrindu sukurtos animacijos ir skaičiavimai gali būti našesni nei JavaScript pagrindu sukurtos alternatyvos, ypač paprastoms transformacijoms.

Apsvarstymai ir geriausia praktika

• Naršyklės suderinamumas: Nors trigonometrinės funkcijos yra gerai palaikomos šiuolaikinėse naršyklėse, būtina patikrinti suderinamumą ir pateikti atsarginius variantus senesnėms naršyklėms. Apsvarstykite galimybę naudoti biblioteką, pvz., PostCSS su trigonometrinių funkcijų įskiepiais, kad pagerintumėte suderinamumą.
• Našumas: Sudėtingi skaičiavimai gali turėti įtakos našumui, ypač su dideliu elementų skaičiumi ar dažnais atnaujinimais. Optimizuokite savo kodą ir naudokite aparatinės įrangos spartinimą, jei įmanoma.
• Skaitomumas: Trigonometriniai skaičiavimai gali padaryti CSS kodą sudėtingesnį. Naudokite komentarus ir aprašomuosius kintamųjų pavadinimus, kad pagerintumėte skaitomumą ir prižiūrimumą.
• Testavimas: Kruopščiai patikrinkite savo dizainus skirtinguose įrenginiuose ir naršyklėse, kad užtikrintumėte nuoseklų veikimą ir reagavimą.

Išvada

CSS trigonometrinės funkcijos suteikia galingą įrankių rinkinį dinamiškiems, reaguojantiems ir matematiškai tiksliems interneto dizainams kurti. Suprasdami ir naudodami šias funkcijas, kūrėjai gali atrakinti naujas išdėstymo, animacijos ir interaktyvių elementų galimybes, žymiai pagerindami vartotojo patirtį. Nuo apskrito išdėstymo ir bangos formos animacijų iki reaguojančių lankų ir elementų pozicionavimo – programos yra didelės ir įvairios. Nors būtina atidžiai apsvarstyti naršyklės suderinamumą, našumą ir skaitomumą, nauda, gaunama įtraukus trigonometrines funkcijas į savo CSS darbo eigą, yra neabejotina, leidžianti jums sukurti tikrai patrauklų ir sudėtingą internetinį patyrimą. CSS toliau tobulėjant, šių metodų įvaldymas taps vis vertingesnis interneto dizaineriams ir kūrėjams visame pasaulyje.

Šios žinios leidžia kurti sudėtingesnius ir vizualiai patrauklesnius dizainus. Ištirkite šias technikas ir eksperimentuokite su skirtingais parametrais, kad atskleistumėte visą CSS trigonometrinių funkcijų potencialą savo interneto kūrimo projektuose.